<template>
	<view class="OrderBox">
		<cu-custom text-color="black" :is-back="true" fh-color="#333">
			<block slot="content">我的订单</block>
		</cu-custom>
		<view class="bg" :style="{backgroundImage: `url(${imgUrl + gameDetailsData.Order.Background})`}"></view>
		<view class="LockHead" :style="{top: CustomBar + 'px'}">
			<view class="SearchBox">
				<image class="SearchIcon" :src="imgUrl + '/static/search.png'"></image>
				<view class="line"></view>
				<input v-model.trim="KeyWords" class="Input" placeholder="搜索"></input>
				<view class="SearchBtn" @click="search">搜索</view>
			</view>

			<view class="ClassifiedMenu">
				<view class="ClassificationItem" v-for="(item,index) in classification" :key="index"
					@click="ChangeCurrentClassification(item.id)">
					<text
						:style="{color: item.id === CurrentClassification ? 'black' : '#9F9F9F',fontWeight: item.id === CurrentClassification ? 700 : 400}">
						{{ item.text }}
					</text>
					<view class="CurrentLine" :style="{opacity: CurrentClassification === item.id ? 1 : 0}"></view>
				</view>
			</view>
		</view>

		<!-- 订单列表 -->
		<scroll-view :scroll-y="true" class="scroll" @scrolltolower="scrolltolower"
			:style="{height:height - CustomBar+'px'}" v-if="OrderList.length!==0">
			<view class="List">
				<view class="ListItem" v-for="(item,indexes) in OrderList" :key="indexes"
					@click.stop="ToOrderDetails(item.orderCode)">
					<view class="OrderCodeAndOrderStatus">
						<view class="OrderCode">订单编号: {{ item.orderCode }}</view>
						<view class="OrderStatus" v-if="item.orderStatus === 28">待付款</view>
						<view class="OrderStatus" v-if="item.orderStatus === 29">待发货</view>
						<view class="OrderStatus" v-if="item.orderStatus === 30">待收货</view>
						<view class="OrderStatus" v-if="item.orderStatus === 40">已完成</view>
						<view class="OrderStatus" v-if="item.orderStatus === 20">已取消</view>
						<view class="OrderStatus" v-if="item.orderStatus === 130">已退款</view>
					</view>
					<scroll-view :scroll-x="true" class="OrderImageList">
						<image :src="i.previewImg" v-for="(i,index) in item.orderGoodsDetailVos"
							class="OrderImageListItem" :key="index"></image>

					</scroll-view>
					<view class="TotalCountAndTotalPrice">
						<view class="TotalCount">共{{ item.orderGoodsDetailVos.length }}件</view>
						<view class="TotalPrice">
							实付: ￥<text class="text">{{ item.orderPrice }}</text>
						</view>
					</view>
					<view class="BtnArea">
						<view class="CancelOrder" @click.stop="CancelOrder('',item.orderCode)"
							v-if="item.orderStatus === 28">取消订单
						</view>
						<view class="ImmediatePayment" @click.stop="ImmediatePayment('',item.orderCode)"
							v-if="item.orderStatus === 28 && item.payMode !== 2">立即支付
						</view>
						<view class="ConfirmReceiptOfGoods" @click.stop="ConfirmReceiptOfGoods('',item.orderCode)"
							v-if="item.orderStatus === 30">确认收货
						</view>
						<view class="ProofPayment"
							v-if="(item.payMode === 2 && item.orderStatus === 28) && item.payInfoStatus !== true"
							@click.stop="ProofPayment('',item.orderCode)">付款凭证
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="noOrderList" v-if="OrderList.length===0">
			<text class="text">暂无订单</text>
		</view>

		<!-- 弹窗区域 -->
		<view class="cu-modal" :class="modalName === 'Image'?'show':''" @click="modalName = null">
			<view class="cu-dialog" @click.stop="">
				<view class="ConfirmReceiptOfGoods" v-if="CurrentModel === 'ConfirmReceiptOfGoods'">
					<view class="title">确认收货吗?</view>
					<view class="BtnArea">
						<view class="CancelBtn" @click="ConfirmReceiptOfGoods('Cancel')">取消</view>
						<view class="ConfirmBtn" @click="ConfirmReceiptOfGoods('Confirm')">确定</view>
					</view>
				</view>
				
				<view class="ProofPayment" v-if="CurrentModel === 'ProofPayment'">
					<view class="title">付款信息</view>
					<view class="MethodOfPayment">
						<view class="MethodOfPaymentTitle">支付方式</view>
						<picker mode="selector" class="picker" :range="rangeList" range-key="name"
							@change="pickerChange">
							<view class="Selector">
								<view v-if="rangeIndex === ''" style="font-size: 28rpx">请选择支付方式</view>
								<view v-else style="color: #333">{{ rangeList[rangeIndex].name }}</view>
								<image class="BottomArrow" :src="imgUrl + '/static/classification/DropArrow_Icon.png'">
								</image>
							</view>
						</picker>
					</view>
					<view class="ProofOfPayment">
						<view class="ProofOfPaymentTitle">付款凭证</view>
						<view class="ProofOfPaymentContent">
							<view class="ProofList" v-if="ProofList.length > 0">
								<view v-for="(item,index) in ProofList" :key="index" class="ProofListItem">
									<image :src="item" class="ProofListImage"></image>
									<image :src="imgUrl + '/static/Order/del.png'" class="clearImage"
										@click="DelImage(index)"></image>
								</view>
							</view>
							<image class="UploadImage" :src="imgUrl + '/static/Order/Upload.jpg'" @click="UploadImage(3 - ProofList.length)"
								v-if="ProofList.length < 3"></image>
						</view>
					</view>
					<view class="NoteOfVoucher">
						<view class="NoteOfVoucherTitle">凭证备注</view>
						<textarea class="textarea" placeholder="可以输入必要的备注信息，方便查账" v-model="textareaValue"
							placeholder-class="placeholder"></textarea>
					</view>
					<view class="BtnArea">
						<view class="CancelBtn" @click="ProofPayment('Cancel')">取消</view>
						<view class="ConfirmBtn" @click="ProofPayment('Confirm')">确定</view>
					</view>
				</view>
				<view class="CancelOrder" v-if="CurrentModel === 'CancelOrder'">
					<view class="title">是否取消订单?</view>
					<view class="BtnArea">
						<view class="CancelBtn" @click="CancelOrder('Cancel')">取消</view>
						<view class="ConfirmBtn" @click="CancelOrder('Confirm')">确定</view>
					</view>
				</view>
				<view class="CancelOrder" v-if="CurrentModel === 'ImmediatePayment'">
					<view class="title">立即支付?</view>
					<view class="BtnArea">
						<view class="CancelBtn" @click="ImmediatePayment('Cancel')">取消</view>
						<view class="ConfirmBtn" @click="ImmediatePayment('Confirm')">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

	import gameDetails from "../../static/lib/public";

	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				height: '',

				isShow: false,

				modalName: '',

				imgUrl: this.$http.imgUrl,

				gameDetailsData: '',

				KeyWords: '',

				classification: [{
						text: '全部',
						id: 0
					},
					{
						text: '待付款',
						id: 28
					},
					{
						text: '待发货',
						id: 29
					},
					{
						text: '待收货',
						id: 30
					},
					{
						text: '已完成',
						id: 40
					},

				],
				CurrentClassification: 0,

				page: {
					pageNumber: 1,
					pageSize: 10
				},

				OrderList: [],

				totalPage: '',

				CurrentModel: '',

				ProofList: [],

				rangeList: [{
						name: '微信',
						value: 1
					},
					{
						name: '支付宝',
						value: 2
					},
					{
						name: '银行卡',
						value: 3
					},
					{
						name: '其他',
						value: 4
					}
				],
				rangeIndex: '',

				rangeValue: '',

				textareaValue: '',

				orderCode: '',


			}
		},
		onLoad() {
			this.height = uni.getSystemInfoSync().windowHeight
			this.gameDetailsData = gameDetails

			uni.$off('gainImage')
			uni.$on('gainImage', (data) => {
				this.ProofList.push(data)
			})
		},
		onShow() {
			this.initCsh()
			this.getOrderShop()
		},
		methods: {
			// 初始化
			initCsh() {
				this.page.pageNumber = 1
				this.page.pageSize = 10
				this.OrderList = []
				this.totalPage = ''
			},
			// 点击搜索
			search() {
				this.initCsh()
				this.getOrderShop()
			},
			async getOrderShop() {
				const url = this.api.Order.OrderList
				uni.showLoading({
					title: '加载中'
				})
				const {
					data
				} = await this.$http.get(url, {
					orderStatus: this.CurrentClassification,
					pageNumber: this.page.pageNumber,
					pageSize: this.page.pageSize,
					goodsName: this.KeyWords
				})
				this.totalPage = data.data.totalPage
				this.OrderList = this.OrderList.concat(data.data.data)
				uni.hideLoading()
			},
			// 跳转到订单详情
			ToOrderDetails(orderCode) {
				uni.navigateTo({
					url: '/pagesA/Order/OrderDetails?id=' + orderCode
				})
			},
			// 更改分类
			ChangeCurrentClassification(index) {
				this.CurrentClassification = index
				this.OrderList = []
				this.page.pageNumber = 1
				this.getOrderShop()
			},
			// 触底
			scrolltolower() {
				if (this.page.pageNumber >= this.totalPage) {
					uni.showToast({
						title: '没有更多了',
						icon: 'none'
					})
					return
				}
				this.page.pageNumber = this.page.pageNumber + 1
				this.getOrderShop()
			},
			// 取消订单
			async CancelOrder(condition, orderCode) {
				if (condition === '') {
					this.CurrentModel = 'CancelOrder'
					this.orderCode = orderCode
					this.showModel()
				} else {
					if (condition === 'Cancel') {
						this.hideModel()
					} else if (condition === 'Confirm') {
						const url = this.api.Order.CancelOrder
						const res = await this.$http.get(url, {
							orderCode: this.orderCode
						})
						if (res.data.code === 200) {
							uni.showToast({
								title: '取消成功',
								icon: 'none',
								duration: 1000
							})
							this.hideModel()
							this.OrderList = []
							await this.getOrderShop()
						}
					}
				}

			},
			// 立即支付
			async ImmediatePayment(condition, orderCode) {
				const lurl = this.api.Order.orderPay
				const {data} = await this.$http.post(lurl,{
					orderCode:orderCode,
					payMode:1
				})
				if(data.code!==200){
					uni.showToast({
						title:data.message,
						icon: 'none'
					});
					return
				}
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: data.data.timeStamp,
					nonceStr: data.data.nonceStr,
					package: data.data.package,
					signType: data.data.signType,
					paySign: data.data.paySign,
					success: (res)=> {
						uni.showToast({
							title: '支付成功',
							icon: 'none'
						})
						this.initCsh()
						this.getOrderShop()
					},
					fail: (err)=> {
						uni.showToast({
							title: '取消支付',
							icon: 'none'
						})
						// setTimeout(() => {
						// 	uni.navigateBack({})
						// }, 300)
					}
				});
			},
			// 确认收货
			async ConfirmReceiptOfGoods(condition, orderCode) {
				if (condition === '') {
					this.orderCode = orderCode
					this.CurrentModel = 'ConfirmReceiptOfGoods'
					this.showModel()
				} else {
					if (condition === 'Cancel') {
						this.hideModel()
					} else if (condition === 'Confirm') {
						const url = this.api.Order.ReceiveGoods
						const res = await this.$http.get(url, {
							orderCode: this.orderCode
						})
						if (res.data.code === 200) {
							uni.showToast({
								title: '确认收货成功',
								icon: 'none'
							})
							this.hideModel()
							this.OrderList = []
							await this.getOrderShop0()
						}
						console.log(res, '确认收货响应')
					}
				}

			},
			// 付款凭证
			async ProofPayment(condition, Code) {
				if (condition === '') {
					this.CurrentModel = 'ProofPayment'
					this.showModel()
					this.orderCode = Code
				} else {
					if (condition === 'Cancel') {
						this.hideModel()
					} else if (condition === 'Confirm') {
						if (this.rangeValue === '') {
							uni.showToast({
								title: '请选择付款方式',
								icon: 'none'
							})
							return
						}
						if (this.ProofList.length === 0) {
							uni.showToast({
								title: '请上传付款凭证',
								icon: 'none'
							})
							return
						}
						const url = this.api.Order.OfflinePay
						const StringProofList = JSON.stringify(this.ProofList)
						const res = await this.$http.post(url, {
							orderCode: this.orderCode,
							payImgUrl: StringProofList,
							payType: this.rangeList[this.rangeIndex].value,
							remark: this.textareaValue
						})
						if (res.data.code === 200) {
							console.log(11111, '执行了');
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								// duration: 1000
							})
						}
						setTimeout(() => {
							this.hideModel()
							this.OrderList = []
							this.getOrderShop()
						}, 1000)
					}
				}
			},
			// 上传图片
			UploadImage(num) {
				// if (this.ProofList.length >= 3) {
				// 	uni.showToast({
				// 		title: '最多上传三张',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				this.$ChooseImage.ChooseImage(num)
				uni.hideLoading()
			},
			DelImage(index) {
				this.ProofList.splice(index, 1)
			},
			pickerChange(e) {
				this.rangeIndex = e.detail.value
				this.rangeValue = this.rangeList[e.detail.value].name
			},
			showModel() {
				this.modalName = 'Image'
			},
			hideModel() {
				this.modalName = null
			},
		},

	}
</script>

<style lang="scss" scoped>
	.OrderBox {

		.bg {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-size: 100% 100%;
			z-index: -1;
		}

		.LockHead {
			position: fixed;
			width: 100%;
			height: 160rpx;
			z-index: 1;

			.SearchBox {
				width: 702rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 36rpx;
				display: flex;
				align-items: center;
				margin-left: 24rpx;


				.SearchIcon {
					margin-top: 2rpx;
					width: 44rpx;
					height: 44rpx;
					margin-left: 16rpx;
					margin-right: 16rpx;
				}

				.line {
					width: 2rpx;
					height: 40rpx;
					background: rgba(153, 153, 153, 0.2);
					border-radius: 2rpx;
				}

				.Input {
					margin-left: 16rpx;
					flex: 1;
				}

				.SearchBtn {
					width: 120rpx;
					height: 56rpx;
					background: #4D8BFF;
					border-radius: 28rpx;
					text-align: center;
					line-height: 56rpx;
					color: #fff;
					margin-right: 8rpx;
				}

			}

			.ClassifiedMenu {
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 40rpx;

				.ClassificationItem {
					width: 25%;
					font-size: 28rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;

					.CurrentLine {
						width: 32rpx;
						height: 4rpx;
						background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
						border-radius: 2rpx;
						margin-top: 5rpx;
					}
				}
			}
		}

		.scroll {
			width: 100%;
			//margin-top: 24rpx;
			padding-top: 184rpx;
			padding-bottom: 20rpx;
			padding-left: 24rpx;

			.List {
				width: 100%;

				.ListItem {
					width: 702rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(153, 153, 153, 0.12);
					border-radius: 24rpx;
					padding: 32rpx 24rpx 32rpx 24rpx;
					margin-bottom: 24rpx;

					.OrderCodeAndOrderStatus {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 32rpx;

						.OrderStatus {
							color: #FF5C46;
						}
					}

					.OrderImageList {
						height: 136rpx;
						width: 100%;
						white-space: nowrap;
						overflow: hidden;

						.OrderImageListItem {
							display: inline-block;
							width: 136rpx;
							height: 100%;
							// background: #D8D8D8;
							border-radius: 8rpx;
							margin-right: 32rpx;

							&:last-child {
								margin-right: 0;
							}
						}


					}

					.TotalCountAndTotalPrice {
						display: flex;
						justify-content: flex-end;
						margin-top: 32rpx;
						width: 100%;

						.TotalCount {
							margin-right: 5rpx;
						}
						.text{
							font-weight: 700;
						}
					}

					.BtnArea {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						justify-content: flex-end;
						margin-top: 24rpx;

						.CancelOrder {
							width: 160rpx;
							height: 56rpx;
							border-radius: 28rpx;
							border: 2rpx solid rgba(153, 153, 153, 0.4);
							// text-align: center;
							display: inline-flex;
							// line-height: 56rpx;
							// align-self: center;
							justify-content: center;
							align-items: center;
							color: #999999;
							margin-left: 24rpx;
						}

						.ImmediatePayment {
							width: 160rpx;
							height: 56rpx;
							background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
							border-radius: 28rpx;
							line-height: 56rpx;
							color: #fff;
							text-align: center;
							margin-left: 24rpx;
						}
						.toPay{
							width: 160rpx;
							height: 56rpx;
							border-radius: 28rpx;
							border: 2rpx solid rgba(153, 153, 153, 0.4);
							text-align: center;
							line-height: 56rpx;
							color: #999999;
							margin-left: 24rpx;
						}
						.ConfirmReceiptOfGoods {
							width: 160rpx;
							height: 56rpx;
							background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
							border-radius: 28rpx;
							line-height: 56rpx;
							text-align: center;
							color: #fff;
							margin-left: 24rpx;
						}

						.ProofPayment {
							width: 160rpx;
							height: 56rpx;
							background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
							border-radius: 28rpx;
							line-height: 56rpx;
							text-align: center;
							color: #fff;
							margin-left: 24rpx;

							.title {
								width: 100%;
								text-align: center;
							}
						}
					}
				}
			}
		}

		.noOrderList {
			margin: 216rpx auto 0;
			width: 320rpx;
			height: 320rpx;
			background: url(https://lzmordershop.oss-cn-hangzhou.aliyuncs.com/static/Order/NoData.png) no-repeat;
			background-size: 100%;
			display: flex;
			justify-content: center;
			align-items: flex-end;

			.text {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.cu-dialog {
			border-radius: 24rpx !important;

			.ConfirmReceiptOfGoods {
				width: 496rpx;
				height: 300rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 56rpx 48rpx;
				color: #333333;
				font-size: 32rpx;
			}

			.ProofPayment {
				width: 670rpx;
				background: #FFFFFF;
				border-radius: 24rpx !important;
				color: #333333;
				font-size: 32rpx;
				padding: 40rpx 32rpx;

				.title {
					color: #333333;
					font-size: 32rpx;
					font-weight: 700;
				}

				.MethodOfPayment {
					.MethodOfPaymentTitle {
						text-align: start;
						font-size: 28rpx;
						margin-top: 40rpx;
						font-weight: 700;
						margin-bottom: 24rpx;
					}

					.picker {
						.Selector {
							height: 76rpx;
							background: rgba(153, 153, 153, 0.12);
							border-radius: 8rpx;
							text-align: start;
							line-height: 76rpx;
							padding: 0 24rpx;
							color: #999999;
							font-size: 28rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.BottomArrow {
								width: 28rpx;
								height: 28rpx;
							}
						}

					}

				}


				.ProofOfPayment {
					margin-top: 40rpx;

					.ProofOfPaymentTitle {
						text-align: start;
						color: #333333;
						font-size: 28rpx;
						font-weight: 700;
					}

					.ProofOfPaymentContent {
						display: flex;
						margin-top: 24rpx;
						width: 100%;

						.UploadImage {
							width: 186rpx;
							height: 186rpx;
						}

						.ProofList {
							display: flex;

							.ProofListItem {
								width: 186rpx;
								height: 186rpx;
								position: relative;
								margin-right: 24rpx;


								.ProofListImage {
									width: 100%;
									height: 100%;

									&:last-child {
										margin-right: 0;
									}
								}

								.clearImage {
									position: absolute;
									top: 0;
									right: 0;
									width: 32rpx;
									height: 32rpx;
								}

							}

						}
					}

				}

				.NoteOfVoucher {
					margin-top: 40rpx;

					.NoteOfVoucherTitle {
						text-align: start;
						color: #333333;
						font-size: 28rpx;
						font-weight: 700;
					}

					.textarea {
						width: 606rpx;
						height: 236rpx;
						background: rgba(153, 153, 153, 0.12);
						border-radius: 8rpx;
						margin-top: 24rpx;
						padding-top: 24rpx;
						padding-left: 30rpx;
						text-align: start;
						font-size: 28rpx;
						color: #333;
					}

					/deep/ .placeholder {
						color: #999999 !important;
						font-size: 28rpx !important;
						text-align: start !important;
					}
				}

				.BtnArea {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 32rpx 0 30rpx;
					font-size: 28rpx;

					.ConfirmBtn {
						width: 248rpx;
						height: 76rpx;
						background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
						border-radius: 38rpx;
						line-height: 76rpx;
						text-align: center;
					}

					.CancelBtn {
						width: 248rpx;
						height: 76rpx;
						border-radius: 38rpx;
						border: 2rpx solid rgba(153, 153, 153, 0.4);
						line-height: 76rpx;
						text-align: center;
						color: #999;
					}
				}
			}

			.CancelOrder {
				width: 496rpx;
				height: 300rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 56rpx 48rpx;
				color: #333333;
				font-size: 32rpx;
			}

			.BtnArea {
				display: flex;
				align-items: center;
				margin-top: 88rpx;

				.CancelBtn {
					width: 176rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 2rpx solid rgba(153, 153, 153, 0.4);
					color: #999;
					line-height: 60rpx;
					text-align: center;
					margin-right: 48rpx;
				}

				.ConfirmBtn {
					width: 176rpx;
					height: 60rpx;
					background: linear-gradient(135deg, #4D8BFF 0%, #78D8FB 100%);
					border-radius: 30rpx;
					line-height: 60rpx;
					text-align: center;
					color: #fff;
				}
			}

		}

	}
</style>